import { jsonUtils } from "utils";
import _ from "lodash";
export const formWrapperProps = {
    title: {
        tag: "Input",
        label: "表单标题",
        type: "basic",  // 基础属性
        props: {
            placeholder: "表单标题"
        },
        afterTransform: (e: any) => e.target.value
    },
    labelSpan: {
        tag: "Slider",
        label: "标签占比",
        type: "basic",
        props: {
            max: 24,
            min: 0,
            step: 1
        },
    },
    controlSpan: {
        tag: "Slider",
        label: "控件占比",
        type: "basic",
        props: {
            max: 24,
            min: 0,
            step: 1
        }
    },
    colNum: {
        tag: "InputNumber",
        label: "列数",
        type: "basic",
        props: {
            placeholder: "列数",
            defaultValue: 1,
            step: 1,
            max: 5,
            min: 1
        }
    },
    layout: {
        tag: "Select",
        label: "排列类型",
        type: "basic",  // 基础属性
        props: {
            placeholder: "控件排列",
            options: [{
                label: "上下排列",
                value: "vertical"
            }, {
                label: "左右排列",
                value: "horizontal"
            }]
        },
    },
    customeFormExtra: {
        tag: "VCodeEditor",
        label: "自定义属性",
        type: "basic",
        field: "formExtra",
        props: {
            btnText: "自定义Form属性",
            btnExtra: {
                type: "primary",
                style: {borderRadius: "16px"}
            },
            alertMessage: "自定义编辑的配置将解析为Object，合并基础的Form.Itm配置之后传递给对应控件的Form.Item组件的props，添加的配置信息请参照Antd Form.Item组件配置"
        },
        getValue: (record: any, node?: any) => {
            return {
                value: jsonUtils.convertToString(record.formExtra)
            }
        }
    }
}
const baseFormEditProps = {
    label: {
        tag: "Input",
        label: "label",
        type: "basic",
        props: {
            placeholder: "控件label"
        },
        afterTransform: (e: any) => e.target.value
    },
    field: {
        tag: "Input",
        label: "字段值",
        type: "basic",
        props: {
            placeholder: "字段值"
        },
        afterTransform: (e: any) => e.target.value
    },
    required: {
        tag: "Switch",
        label: "必填",
        type: "basic",
        field: "formExtra",
        getValue: (record: any, node?: any) => {
            const rules = record?.formExtra?.rules || [];
            const { required } = rules.find((item: any) => Reflect.has(item, "required")) || {};
            return {checked: !!required};
        }
    },
    requiredMessage: {
        tag: "Input",
        label: "必填提示",
        type: "basic",
        field: "formExtra",
        reply: (record: any) => {
            const rules = record?.formExtra?.rules || [];
            const { required } = rules.find((item: any) => Reflect.has(item, "required")) || {};
            return {
                disabled: !required
            }
        },
        getValue: (record: any, node?: any) => {
            const rules = record?.formExtra?.rules || [];
            const { message } = rules.find((item: any) => Reflect.has(item, "required")) || {};
            return {value: message};
        },
        props: {
            defaultValue: "内容不能为空"
        },
        afterTransform: (e: any) => e.target.value
    },
    disabled: {
        tag: "Switch",
        label: "禁用",
        type: "basic",
        getValue: (record: any, node?: any) => {
            return {checked: !!record?.disabled};
        }
    },
    customeFormExtra: {
        tag: "VCodeEditor",
        label: "自定义属性",
        type: "basic",
        field: "formExtra",
        props: {
            btnText: "自定义控件属性信息",
            btnExtra: {
                type: "primary",
                style: {borderRadius: "16px"}
            }
        },
        getValue: (record: any, node?: any) => {
            return {
                value: jsonUtils.convertToString(record.formExtra)
            }
        }
    }
}
const baseEditInputProps = {
    placeholder: {
        tag: "Input",
        label: "默认提示",
        type: "basic",
        props: {
            placeholder: "默认提示文案"
        },
        afterTransform: (e: any) => e.target.value
    }
}
const baseEditStyleProps = {
    fontSize: {
        tag: "InputNumber",
        label: "字体大小",
        type: "style",
        props: {
            min: 0,
            max: 100,
            step: .5,
            precision: 0,
            defaultValue: 14
        },
        afterTransform: (e: any) => `${e}px`,
        getValue: (record: any) => {
            const { fontSize = "0px" } = record?.style || {};
            const value = fontSize.includes("px") ? parseInt(fontSize.slice(0, -2)) : parseInt(fontSize)
            return { value }
        }
    },
    color: {
        tag: "VColorPicker",
        label: "字体颜色",
        type: "style",
        getValue: (record: any, node?: any) => {
            const { color = "#333" } = record?.style || {};
            return { value: color }
        }
    }
}

export const datePickerProps = {
    ...baseEditStyleProps,
    ...baseFormEditProps,
    ...baseEditInputProps
}

export const switchProps = {
    ...baseFormEditProps
}
export const checkboxProps = {
    ...baseFormEditProps
}
export const sliderProps = {
    ...baseFormEditProps,
    max: {
        tag: "InputNumber",
        label: "最大值",
        type: "basic",
        props: {
            placeholder: "输入框最大值"
        },
    },
    min: {
        tag: "InputNumber",
        label: "最小值",
        type: "basic",
        props: {
            placeholder: "输入框最小值"
        },
    },
    step: {
        tag: "InputNumber",
        label: "步进值",
        type: "basic",
        props: {
            placeholder: "输入框步进值"
        },
    },
}
export const inputProps = {
    ...baseEditStyleProps,
    ...baseFormEditProps,
    ...baseEditInputProps,
    maxLength: {
        tag: "InputNumber",
        label: "最大长度",
        type: "basic",
        props: {
            placeholder: "最大文本框长度"
        }
    }
}
export const passwordProps = {
    ...baseEditStyleProps,
    ...baseFormEditProps,
    ...baseEditInputProps
}
export const inputNumberProps = {
    ...baseEditStyleProps,
    ...baseFormEditProps,
    ...baseEditInputProps,
    max: {
        tag: "InputNumber",
        label: "最大值",
        type: "basic",
        props: {
            placeholder: "输入框最大值"
        },
    },
    min: {
        tag: "InputNumber",
        label: "最小值",
        type: "basic",
        props: {
            placeholder: "输入框最小值"
        },
    },
    step: {
        tag: "InputNumber",
        label: "步进值",
        type: "basic",
        props: {
            placeholder: "输入框步进值"
        },
    },
    precision: {
        tag: "Slider",
        label: "数值精度",
        type: "basic",
        props: {
            max: 10,
            min: 0,
            step: 1
        },
    }
}
export const selectProps = {
    ...baseEditStyleProps,
    ...baseFormEditProps,
    ...baseEditInputProps,
    options: {
        tag: "OptionSetting",
        label: "控件选项",
        type: "basic",
    }
}
export const radioProps = {
    ...baseFormEditProps,
    options: {
        tag: "OptionSetting",
        label: "控件选项",
        type: "basic",
    }
}
export const checkboxGroupProps = {
    ...baseFormEditProps,
    options: {
        tag: "OptionSetting",
        label: "控件选项",
        type: "basic",
    }
}
export const rateProps = {
    ...baseFormEditProps,
}
export const buttonProps = {
    ...baseEditStyleProps,
    text: {
        tag: "Input",
        label: "按钮文字",
        type: "basic",
        afterTransform: (e: any) => e.target.value
    },
    type: {
        tag: "Select",
        label: "按钮类型",
        type: "basic",
        props: {
            placeholder: "按钮类型",
            options: [
                {label: "Primary", value: "primary"},
                {label: "Default", value: "default"},
                {label: "Dashed", value: "dashed"},
                {label: "Text", value: "text"},
                {label: "Link", value: "link"},
            ]
        }
    },
    danger: {
        tag: "Switch",
        label: "Danger按钮",
        type: "basic",
        getValue: (record: any, node?: any) => {
            return {checked: !!record?.danger};
        }
    },
    size: {
        tag: "Select",
        label: "按钮大小",
        type: "basic",
        props: {
            placeholder: "按钮大小",
            options: [
                {label: "Large", value: "large"},
                {label: "Middle", value: "middle"},
                {label: "Small", value: "small"}
            ]
        }
    },
    offset: {
        tag: "Slider",
        label: "偏移",
        type: "basic",
        field: "formExtra.wrapperCol",
        props: {
            max: 24,
            min: 0,
            step: 1
        },
        getValue: (record: any, node?: any) => {
            const { offset } = record?.formExtra?.wrapperCol || {};
            return {value: offset};
        }
    },
    span: {
        tag: "Slider",
        label: "控件占比",
        type: "basic",
        field: "formExtra.wrapperCol",
        props: {
            max: 24,
            min: 0,
            step: 1
        },
        getValue: (record: any, node?: any) => {
            const { span } = record?.formExtra?.wrapperCol || {};
            return {value: span};
        }
    },
    htmlType: {
        tag: "Switch",
        label: "提交按钮",
        type: "basic",
        getValue: (record: any, node?: any) => {
            const { htmlType } = record;
            return { checked: htmlType === "submit" }
        },
        afterTransform: (checked: any) => checked ? "submit" : "default"
    },
    borderRadius: {
        tag: "Slider",
        label: "圆角",
        type: "style",
        props: {
            min: 0,
            max: 100,
            step: 1
        },
        afterTransform: (e: any) => `${e}px`,
        getValue: (record: any, node?: any) => {
            const { borderRadius = "0px" } = record?.style || {};
            const value = borderRadius.includes("px") ? parseInt(borderRadius.slice(0, -2)) : parseInt(borderRadius)
            return { value }
        }
    }
}

export const tableProps = {
    title: {
        tag: "Input",
        label: "表格标题",
        type: "basic",
        afterTransform: (e: any) => e.target.value
    },
    scrollX: {
        tag: "InputNumber",
        label: "X轴可滚动",
        type: "basic",
        props: {
            min: 0,
            max: Infinity,
            precision: 0
        }
    },
    scrollY: {
        tag: "InputNumber",
        label: "Y轴可滚动",
        type: "basic",
        props: {
            min: 0,
            max: Infinity,
            precision: 0
        }
    },
    children: {
        tag: "TableColumnsSetting",
        type: "columns",
        getValue: (record: any, node?: any) => {
            return {
                columns: (node?.children || []).map((item: any) => ({
                    id: item?.id,
                    type: item?.component,
                    ...item.columnProps,
                    baseProps: item.props
                })),
            }
        },
        afterTransform: (value: any, node: any) => {
            return (value || []).map((item: any) => {
                const childProps = (node?.children || []).find((child: any) => child.id === item.id);
                const pickColumns = _.pickBy(item, (value, key) => !["baseProps", "id", "type"].includes(key));
                return {
                    ...childProps,
                    columnProps: pickColumns || childProps.columnProps,
                    props: item.baseProps || childProps?.props
                }
            })
        }
    },
    dataSource: {
        tag: "VCodeEditor",
        label: "数据源",
        type: "basic",
        props: {
            btnText: "数据源",
            btnExtra: {
                type: "primary",
                style: {borderRadius: "16px"}
            },
            alertMessage: "Table数据源需要数据源Key值和对应列DataIndex保持一致的对象数组或着异步加载数据的方法"
        },
        getValue: (record: any, node?: any) => {
            return {
                value: jsonUtils.convertToString({dataSource: record.dataSource || []})
            }
        },
        afterTransform: (value: any, node: any) => {
            return value?.dataSource || []
        }
    },
    showPagination: {
        tag: "Switch",
        label: "显示分页",
        type: "basic",
        getValue: (record: any) => {
            return {checked: !!record?.showPagination};
        }
    },
    showQuickJumper: {
        tag: "Switch",
        label: "快速跳转",
        type: "basic",
        getValue: (record: any) => {
            return {checked: !!record?.showQuickJumper};
        },
        reply: (record: any) => {
            const showPagination = record?.showPagination;
            return {
                disabled: !showPagination
            }
        },
    },
    pageSizeOptions: {
        tag: "Switch",
        label: "分页选项",
        type: "basic",
        getValue: (record: any) => {
            return {checked: !!record?.pageSizeOptions};
        },
        reply: (record: any) => {
            const showPagination = record?.showPagination;
            return {
                disabled: !showPagination
            }
        },
    },
    showTotal: {
        tag: "Switch",
        label: "显示总数",
        type: "basic",
        getValue: (record: any) => {
            return {checked: !!record?.showTotal};
        },
        reply: (record: any) => {
            const showPagination = record?.showPagination;
            return {
                disabled: !showPagination
            }
        },
    }
}

// echarts控件编辑配置
export const echartsWrapper = {
    title: {
        tag: "Input",
        label: "表单标题",
        type: "basic",  // 基础属性
        props: {
            placeholder: "表单标题"
        },
        afterTransform: (e: any) => e.target.value
    },
}
export const reactECharts = {
    getOptions: {
        tag: "VCodeEditor",
        label: "图表配置",
        type: "basic",
        props: {
            btnText: "echarts图表配置",
            btnExtra: {
                type: "primary",
                shape: "round"
            },
            alertMessage: <span>配置内容请参照Echarts图表库配置信息，请参见<a href="https://echarts.apache.org/zh/option.html" target="__blank">Echarts配置</a></span>
        },
        getValue: (record: any) => {
            return {
                value: jsonUtils.convertToString({ getOptions: record?.getOptions || {} })
            }
        },
        afterTransform: (value: any) => {
            return value?.getOptions || {}
        }
    },
    marginTop: {
        tag: "InputNumber",
        label: "上边距",
        type: "style",
        afterTransform: (e: any) => `${e}px`,
        getValue: (record: any) => {
            const { marginTop = "0px" } = record?.style || {};
            const value = marginTop.includes("px") ? parseInt(marginTop.slice(0, -2)) : parseInt(marginTop)
            return { value }
        }
    },
    marginBottom: {
        tag: "InputNumber",
        label: "下边距",
        type: "style",
        afterTransform: (e: any) => `${e}px`,
        getValue: (record: any) => {
            const { marginBottom = "0px" } = record?.style || {};
            const value = marginBottom.includes("px") ? parseInt(marginBottom.slice(0, -2)) : parseInt(marginBottom)
            return { value }
        }
    },
    marginLeft: {
        tag: "InputNumber",
        label: "左边距",
        type: "style",
        afterTransform: (e: any) => `${e}px`,
        getValue: (record: any) => {
            const { marginLeft = "0px" } = record?.style || {};
            const value = marginLeft.includes("px") ? parseInt(marginLeft.slice(0, -2)) : parseInt(marginLeft)
            return { value }
        }
    },
    marginRight: {
        tag: "InputNumber",
        label: "右边距",
        type: "style",
        afterTransform: (e: any) => `${e}px`,
        getValue: (record: any) => {
            const { marginRight = "0px" } = record?.style || {};
            const value = marginRight.includes("px") ? parseInt(marginRight.slice(0, -2)) : parseInt(marginRight)
            return { value }
        }
    },
    width: {
        tag: "InputNumber",
        label: "宽度",
        type: "style",
        afterTransform: (e: any) => `${e}px`,
        getValue: (record: any) => {
            const { width = "0px" } = record?.style || {};
            const value = width.includes("px") ? parseInt(width.slice(0, -2)) : parseInt(width)
            return { value }
        }
    },
    height: {
        tag: "InputNumber",
        label: "高度",
        type: "style",
        afterTransform: (e: any) => `${e}px`,
        getValue: (record: any) => {
            const { height = "0px" } = record?.style || {};
            const value = height.includes("px") ? parseInt(height.slice(0, -2)) : parseInt(height)
            return { value }
        }
    }
}